<template>
	<view class="cashier u-skeleton">
		<u-navbar title="结算" :background="{
			'backgroundColor':'#fff'
		}" :borderBottom="false" class="u-skeleton-rect"></u-navbar>
		<view class="top">
			<view class="title u-skeleton-rect">实际金额</view>
			<view class="price u-skeleton-rect">￥{{goodsPay}}</view>
		</view>
		<view class="bottom">
			<view class="item u-skeleton-rect">
				<view class="left">
					<image :src="$util.img('/static/img/order/微信支付.png')" mode="widthFix"></image>
					<view class="title">微信支付</view>
				</view>
				<view class="right" @click="current = 'weixin'">
					<u-icon name="checkbox-mark" v-if="current == 'weixin'"></u-icon>
				</view>
			</view>
			<view class="item u-skeleton-rect">
				<view class="left">
					<image :src="$util.img('/static/img/order/支付宝.png')" mode=""></image>
					<view class="title">支付宝</view>
				</view>
				<view class="right" @click="current = 'zhifubao'">
					<u-icon name="checkbox-mark" v-if="current == 'zhifubao'"></u-icon>
				</view>
			</view>
		</view>
		<u-button class="btn-primary u-skeleton-rect" @click="payOrder" ripple-bg-color="rgba(0,0,0,.4)" :ripple="true">立即支付</u-button>
		<u-skeleton :loading="loding" :animation="true" bgColor="#FFF" ></u-skeleton>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				loding:true,
				current:'weixin',
				goodsPay:'0.00'
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id;
				this.loding = false;
			}
			this.goodsPay = uni.getStorageSync('goodsPay');
		},
		onShow() {},
		methods:{
			payOrder(){
				this.$http.asyncSendrequest({
					url: '/order/payOrder',
					data: {
						id:this.id,
						pay_type:this.current == 'weixin' ? 1 : 2
					},
					success: res => {
						this.$util.taost({
							title:res.msg,
							callback:v=>{
								if(res.code == '0'){
									this.$util.redirectTo('/pages/order/order',{},'redirectTo')
								}
							}
						});
						if (res.code == '0') {
							
							// #ifdef H5
	// 						if (this.paymenttype[this.paymentindex].id == '1') {
	// 							let that = this;
	// 							this.$wx.wxpay({
	// 								appid:res.data.pay.appid,
	// 								timeStamp: res.data.pay.timeStamp,
	// 								nonceStr: res.data.pay.nonceStr, // 支付签名随机串，不长于 32 位
	// 								package: res.data.pay.package,
	// 								signType: res.data.pay.signType,
	// 								paySign: res.data.pay.paySign, // 支付签名
	// 							}, function(r) {
	// 								// 支付成功后的回调函数
	// 								if (r.errMsg === 'chooseWXPay:ok') {
	// 									uni.showToast({
	// 										title: '支付成功',
	// 										icon: 'success',
	// 										success() {
	// 											that.$util.redirectTo(
	// 												'/pages/personal/personal', {},
	// 												'switchTab');
	// 										}
	// 									})
	// 								} else if (r.errMsg === 'chooseWXPay:cancel') {
	// 									uni.showToast({
	// 										title: '支付失败',
	// 										icon: 'none',
	// 										success() {
	// 											that.$util.redirectTo(
	// 												'/pages/personal/personal', {},
	// 												'switchTab');
	// 										}
	// 									})
	// 								}
	// 							});
	// 						} else {
	

	// 						}
							// #endif
							const div = document.createElement('div')
							div.innerHTML = res.data;
							document.body.appendChild(div)
							if (document.getElementById('alipay_submit')) {
								document.getElementById('alipay_submit').submit()
							} else if (document.getElementById('pay_form')) {
								document.getElementById('pay_form').submit()
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top{
		margin: 70rpx 0 60rpx;
		.title{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;
			text-align: center;
		}
		.price{
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
			text-align: center;
		}
	}
	.bottom{
		min-height: 260rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 50rpx 35rpx 60rpx;
		margin: 0 30rpx;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;
			.left{
				display: flex;
				align-items: center;
				image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 30rpx;
				}
				.title{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
			.right{
				width: 40rpx;
				height: 40rpx;
				border-radius: 6rpx;
				border: 2rpx solid #000;
				text-align: center;
				line-height: 40rpx;
			}
		}
		.item:nth-child(2n){
			margin-bottom: 0;
		}
	}
	.btn-primary {
		height: 96rpx;
		background: #292929;
		border-radius: 10rpx;
		text-align: center;
		line-height: 96rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		margin-top: 116rpx;
		position: fixed;
		bottom: 20rpx;
		left: 30rpx;
		width: calc(100% - 60rpx);
	}
</style>